<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>预约贴膜</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="location" content="province=;city=;coord=" />
		<link rel="apple-touch-icon-precomposed" href="images/screenLogo.png" />
		<link rel="stylesheet" type="text/css" href="css/m2015.css" />
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/main.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.datetimepicker.js"></script>
		<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css" />
		<style>
			.appoint-pasting-box {
				background: #fff;
				padding: 10px;
			}
			
			.appoint-pasting-title h3 {
				font-size: 18px;
				font-family: 'Microsoft YaHei';
				color: #333;
				font-weight: bold;
				padding: 0 10px;
				border-left: solid 10px #f60;
				height: 20px;
				line-height: 20px;
				margin: 15px 0;
			}
			
			.appoint-pasting-title p {
				padding: 10px;
				background: #f6f6f6;
				border: solid 1px #e3e3e3;
			}
			
			.appoint-pasting-process {
				overflow: hidden;
			}
			
			.appoint-pasting-process span {
				display: block;
				float: left;
				margin: 10px 20px 0 0;
			}
			
			.appoint-pasting-process span i {
				display: inline-block;
				width: 20px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				border-radius: 100%;
				background: #1dccaa;
				color: #fff;
				vertical-align: middle;
				position: relative;
				bottom: 1px;
				margin-right: 5px;
			}
			
			.appoint-pasting-form {
				margin-top: 20px;
			}
			
			.appoint-pasting-form dl {
				min-height: 40px;
				margin-bottom: 10px;
			}
			
			.appoint-pasting-form dl dd input {
				height: 35px;
				line-height: 35px\9;
				width: 300px;
				border: solid 1px #ccc;
				text-indent: 5px;
			}
			
			.appoint-pasting-form dl dd textarea {
				width: 300px;
				height: 80px;
				border: solid 1px #ccc;
			}
			
			.appoint-pasting-form dl dd button {
				background: #f44623;
				width: 150px;
				height: 50px;
				font-size: 16px;
				font-family: 'Microsoft YaHei';
				color: #fff;
				border-radius: 3px;
				border: 0;
				cursor: pointer;
				margin-bottom: 10px;
			}
			
			.appoint-pasting-shop {
				line-height: 35px;
			}
			
			.appoint-pasting-shop a {
				cursor: pointer;
				display: inline-block;
				border: solid 1px #ccc;
				padding: 0 10px;
				height: 25px;
				line-height: 25px;
			}
			
			.appoint-pasting-shop a i {
				display: inline-block;
				width: 10px;
				vertical-align: middle;
				margin: 0 0 0 10px;
				height: 25px;
				background: url() no-repeat center;
			}
			
			.appoint-pasting-shop select {
				height: 27px;
				margin-left: 10px;
			}
			
			.appoint-pasting-shop-info {
				padding: 10px;
				background: #f6f6f6;
			}
			
			.appoint-pasting-shop-info a {
				color: #45a1de;
				margin: 5px 10px 0 0;
				display: inline-block;
			}
			
			.sendmsg {
				padding: 10px;
			}
			
			.sendmsg input {
				height: 30px;
				width: 180px;
				border: solid 1px #ccc;
			}
			
			.sendmsg p {
				margin-top: 10px;
			}
			
			.sendmsg p span {
				display: inline-block;
				width: 70px;
				text-align: right;
			}
		</style>
	</head>

	<body>
		<header id="header" style="">
			<div class="topbar">
				<a href="javascript:history.back();" class="back_btn"><i class="iconfont">ş</i></a>
				<a href="javascript:;" class="top_home"><i class="iconfont">ƙ</i></a>
				<h1 class="page_title">预约服务</h1>
			</div>
			<div class="home_menu" id="hMenu">
				<a href="index.html"><i class="go_index"></i><span>首页</span></a>
				<a href="goods_cat.html"><i class="go_fenlei"></i><span>商品分类</span></a>
				<a href="cart.html"><i class="go_cart"></i><span>购物车</span></a>
				<a href="member_addr.html"><i class="go_me"></i><span>收货地址</span></a>
			</div>
		</header>
		<script>
		    //title右上角隐藏菜单
			$(".top_home").click(function(){
				var target = $(".home_menu"); 
				if(target.slideToggle){
					target.slideToggle()
				}else{
					target.toggle()
				}
			});
		</script>
		
		<div class="appoint-pasting-box">
			<div class="appoint-pasting-title">
				<p>为了更好的采购到您手机型号所匹配的优质手机膜，我们将采取预约，尽可能减少使用裁剪膜。<em style="color:red;">(目前仅支持6寸以下机型免费贴高清膜)</em></p>
			</div>
			<div class="appoint-pasting-process">
				<span><i style="background:#f44623;">1</i>填写预约信息</span>
				<span><i>2</i>发送预约凭证信息</span>
				<span><i>3</i>到店出示凭证</span>
				<span><i>4</i>完成贴膜</span>
			</div>
			<div class="appoint-pasting-form">
				<dl>
					<dt>
       选择预约的门店： 
     </dt>
					<dd>
						<div class="appoint-pasting-shop">
							<a class="now_city" href="/city.html?backUrl=/pastingappoint.aspx">河南 洛阳市 市辖区<i></i></a>
							<select id="selectShop">
								<option value="">请选择店面</option>
							</select>
						</div>
						<div class="appoint-pasting-shop-info hide">
							<script type="text/html" id="shopTmpl">
								<p>{{AreaName}}地址：{{ShopAddress}}</p>
								<p>销售热线：{{SaleTel}}</p>
								<p>工作时间：{{Hours}}</p>
								<a href="http://m.ch999.com/location/{{Id}}.html" target="_blank">店铺详情</a>
								<a href="/shopmap.aspx?map={{Area}}" rel="nofollow" target="_blank">位置地图</a>
								<a href="javascript:;" onclick="sendShopToPhone({{Id}},this)">发送至手机</a>
							</script>
							<script type="text/html" id="shopOp">
								{{each}}
								<option value="{{$value.Id}}">{{$value.AreaName}}·{{$value.Area}}</option>{{/each}}
							</script>
						</div>
					</dd>
				</dl>
				<dl>
					<dt>需贴膜机型：</dt>
					<dd>
						<input type="text" placeholder="如iPhone6、三星note4等" id="model" />
					</dd>
				</dl>
				<dl>
					<dt>您的手机号码：</dt>
					<dd>
						<input type="text" id="phone" value="17702929112 " />
					</dd>
				</dl>
				<dl>
					<dt>预约到店时间：</dt>
					<dd>
						<input type="text" id="time" placeholder="如2015-12-11" />
					</dd>
				</dl>
				<dl>
					<dt>备注：</dt>
					<dd>
						<textarea placeholder="您的特殊要求写在这里" id="backup"></textarea>
					</dd>
				</dl>
				<dl>
					<dt></dt>
					<dd>
						<button onclick="submitAppoint()">提交预约</button>
					</dd>
				</dl>
			</div>
		</div>
		<div class="sendmsg-box hide">
			<div class="sendmsg">
				<p><span>手机号码：</span><input type="text" id="myphone" value="18005151538" /></p>
				<p><span>验证码：</span><input type="text" id="verify" style="width:80px;" /><img id="vCodeImg" src="/ImgCode.aspx" width="80" height="30" style="margin: 0 10px; vertical-align: middle;" onclick=" this.src = '/ImgCode.aspx?t=' + Math.random() * 100 " /></p>
			</div>
		</div>
		<div class="g4-tip" style="height:30px;line-height:30px;margin-top:10px;padding:0 10px;display:none;">
			<a href="about.html" style="color:#f44623;">您当前使用的是2G/3G网络，现在就免费升4G &gt;&gt;</a>
		</div>
		
		<div class="foot-nav border_top hide" style="">
			<a href="index.html"><i class="home"></i><span>首页</span></a>
			<a href="/goods_cat.html"><i class="cate"></i><span>商品分类</span></a>
			<a href="cart.html"><i class="cart"></i><span>购物车</span></a>
			<a href="member_index.html"><i class="user"></i><span>我的</span></a>
		</div>
		
		<footer id="footer" style="">
			<div class="footbar" id="noLogin">
				<a id="f1_btnLogin" href="javascript:;" class="login_btn">登录</a>
				<a href="http://m.ch999.com/register.aspx">注册</a>
				<a href="#" class="backtop_btn">↑回顶部</a>
			</div>
			<div class="footbar" id="yesLogin" style="display: none">
				<a class="login_btn" href="http://m.ch999.commember_index.html" id="txtUsername"></a>
				<a onclick="LoginOut()">退出</a>
				<a href="#" class="backtop_btn">↑回顶部</a>
			</div>
			<p class="footlink">
				<a href="http://m.ch999.com/" style="margin:0 18px;">触屏版</a>
				<a id="link_pc" style="margin:0 18px;">电脑版</a>
				<a href="http://m.ch999.com/zt/app/" style="margin:0 18px;">客户端</a>
				<a href="http://job.ch999.com/m/" style="margin:0 18px;">招聘</a>
			</p>
			<p class="footlink">Copyright&copy;2006-2015&nbsp;&nbsp;三九手机网
				<a style="margin:0 0 0 10px;" id="_tousu" href="tousu.aspx">投诉及建议</a>
			</p>
		</footer>
		<script>
			var url = location.href;
			var platfomrs = ["360ad", "goad", "juxad", "zhtad", "ttad", "tead", "snswxtsad", "snswxgnad", "snsxlad", "snstxad", "snsqzad", "snstbzad", "snstbwad", "snsblad", "snshzad", "snsqtad", "mgzhad", "mttad"];
			for(index in platfomrs) {
				if(url.indexOf(platfomrs[index]) > 0) {
					Cookie.Set("sem", "on", 60 * 60 * 3);
				}
			}
		</script>
		<script>
			$("#time").datetimepicker({
				lang: "ch",
				format: "Y-m-d",
				timepicker: false,
			});
			$("#selectShop").change(function() {
				var shops = $(this).data();
				for(var shopIndex in shops) {
					if(shops[shopIndex].Id == $(":selected", $(this)).val()) {
						$(".appoint-pasting-shop-info").html(template("shopTmpl", shops[shopIndex])).show();
					}
				}
			});

			function sendShopToPhone(shopid, the) {
				layer.open({
					type: 1,
					title: "发送店铺地址至手机",
					content: $(".sendmsg-box").html(),
					btn: ['发送短信', '取消'],
					yes: function() {
						var phone = $("#myphone").val(),
							verify = $("#verify").val();
						if(!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(phone))) {
							layer.open({
								content: "请输入正确的手机号码。",
								time: 1.5
							});
							return;
						}
						if(!verify) {
							layer.open({
								content: "请输入验证码。",
								time: 1.5
							});
							return;
						}
						$.post("/ajax/ajaxOperate.aspx", {
							'act': 'SendDiMian',
							'code': verify,
							'phone': phone,
							'ziid': shopid,
							"type": 1
						}, function(res) {
							if(res.stats == 1) {
								layer.open({
									content: "短信发送成功，注意查收哦！",
									time: 1.5
								});
							} else {
								layer.open({
									content: res.result,
									time: 1.5
								});
							}
						}, "json");
					}
				});
			}

			function submitAppoint() {
				var model = $("#model").val(),
					phone = $("#phone").val(),
					shop = $("#selectShop").val(),
					time = $("#time").val(),
					backup = $("#backup").val();
				if(!model) {
					layer.open({
						content: "请填写您的机型。",
						time: 1.5
					});
					return;
				}
				if(!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(phone))) {
					layer.open({
						content: "请输入正确的手机号码。",
						time: 1.5
					});
					return;
				}
				if(!shop) {
					layer.open({
						content: "请选择预约的店面。",
						time: 1.5
					});
					return;
				}
				if(!time) {
					layer.open({
						content: "请选择预约的时间。",
						time: 1.5
					});
					return;
				}
				$.post("?act=submit", {
					model: model,
					phone: phone,
					shop: shop,
					time: time,
					remark: backup
				}, function(res) {
					if(res.status == 1) {
						layer.open({
							content: "尊敬的客户，感谢您进行预约到店免费贴膜服务，稍后店面人员将与您核实预约需求，提前为您准备好贴膜。我们已发送免费贴膜体验码至您预留的手机中，进店出示此码即可，请注意查收！",
							btn: ['返回首页'],
							yes: function() {
								location.href = '/';
							}
						});
					} else {
						layer.open({
							content: res.msg,
							time: 1.5
						});
					}
				}, "json");
			}
			$(function() {
				var cityId = Cookie.Get("cityid");
				$.get("/ajax/ajaxOperate.aspx?act=getShopInfo1&cityid=" + cityId, function(rsp) {
					if(rsp.stats == 1) {
						$("#selectShop").append(template("shopOp", rsp.result)).data(rsp.result);
					}
				}, "json");
			});
		</script>
	</body>

</html>